/* ==========================================================
   FLYER STYLE.CSS
   RG DIGITALDRUCKFORUM GÖHRINGER
========================================================== */


/* ==========================================================
   01
   BASIS / VARIABLEN
========================================================== */

body#flyer {

  --flyer-bg:
    #101315;

  --flyer-bg-deep:
    #090b0c;

  --flyer-card:
    rgba(18, 18, 18, 0.82);

  --flyer-card-hover:
    rgba(27, 27, 27, 0.9);

  --flyer-line:
    rgba(255, 255, 255, 0.10);

  --flyer-line-strong:
    rgba(255, 255, 255, 0.20);

  --flyer-muted:
    rgba(255, 255, 255, 0.66);

  --flyer-muted-light:
    rgba(255, 255, 255, 0.78);

  --flyer-red:
    var(--red-light, #ff3046);

  --flyer-radius:
    28px;

  --flyer-radius-small:
    18px;

  --flyer-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.34);

  --flyer-shadow-soft:
    0 18px 55px
    rgba(0, 0, 0, 0.22);

}


body#flyer {

  background:
    var(--flyer-bg);

  color:
    #ffffff;

}


.flyer-page {

  position:
    relative;

  width:
    100%;

  padding-top:
    92px;

  overflow:
    hidden;

  background:
    var(--flyer-bg);

}


.flyer-shell {

  width:
    100%;

  margin:
    0;

  padding-right:
    var(
      --site-gutter,
      clamp(28px, 5vw, 92px)
    );

  padding-left:
    var(
      --site-gutter,
      clamp(28px, 5vw, 92px)
    );

}


/* ==========================================================
   02
   BREADCRUMB
========================================================== */

.product-breadcrumb {

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(255, 255, 255, 0.48);

  background:
    var(--flyer-bg-deep);

  font-size:
    0.76rem;

  font-weight:
    650;

}


.product-breadcrumb a {

  color:
    inherit;

  text-decoration:
    none;

  transition:
    color .25s ease;

}


.product-breadcrumb a:hover,
.product-breadcrumb a:focus-visible {

  color:
    var(--flyer-red);

}


.product-breadcrumb span {

  color:
    rgba(255, 255, 255, 0.25);

}


.product-breadcrumb strong {

  color:
    #ffffff;

  font-weight:
    650;

}


/* ==========================================================
   03
   ALLGEMEINE SECTIONS
========================================================== */

.flyer-section {

  position:
    relative;

  width:
    100%;

  padding:
    105px 0;

  background:
    var(--flyer-bg);

}


.flyer-section:nth-of-type(even) {

  background:
    var(--flyer-bg-deep);

}


.flyer-section + .flyer-section {

  border-top:
    1px solid
    rgba(255,255,255,.055);

}


.flyer-section-intro,
.flyer-faq-heading {

  width:
    100%;

  max-width:
    900px;

  margin:
    0 0 54px;

}


.flyer-kicker {

  margin:
    0 0 14px;

  color:
    var(--flyer-red);

  font-size:
    .78rem;

  font-weight:
    900;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

}


.flyer-small-label {

  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--flyer-red);

  font-size:
    .70rem;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.flyer-section-intro h2,
.flyer-faq-heading h2,
.flyer-final-card h2 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.35rem
    );

  line-height:
    1;

  letter-spacing:
    -0.045em;

  text-wrap:
    balance;

}


.flyer-section-intro > p:last-child {

  max-width:
    720px;

  margin:
    20px 0 0;

  color:
    var(--flyer-muted);

  font-size:
    .96rem;

  line-height:
    1.72;

}


/* ==========================================================
   04
   HERO
========================================================== */

.flyer-hero {

  position:
    relative;

  width:
    100%;

  min-height:
    720px;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #080808;

}


.flyer-hero-bg {

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center 52%;

  transform:
    scale(1.025);

  filter:
    brightness(.80)
    contrast(1.06)
    saturate(.96);

  transition:
    transform 8s ease,
    filter .8s ease;

}


.flyer-hero:hover .flyer-hero-bg {

  transform:
    scale(1.06);

  filter:
    brightness(.84)
    contrast(1.08)
    saturate(1);

}


.flyer-hero-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:

    linear-gradient(
      90deg,
      rgba(5,5,5,.95) 0%,
      rgba(5,5,5,.88) 22%,
      rgba(5,5,5,.66) 44%,
      rgba(5,5,5,.35) 64%,
      rgba(5,5,5,.10) 84%,
      rgba(5,5,5,0) 100%
    ),

    linear-gradient(
      180deg,
      rgba(0,0,0,.24) 0%,
      rgba(0,0,0,.04) 40%,
      rgba(0,0,0,.14) 64%,
      rgba(0,0,0,.76) 100%
    );

}


.flyer-hero-inner {

  position:
    relative;

  z-index:
    2;

  min-height:
    720px;

  padding-top:
    110px;

  padding-bottom:
    28px;

  display:
    flex;

  flex-direction:
    column;

}


/* ==========================================================
   HERO SERVICES
========================================================== */

.flyer-hero-services {

  width:
    fit-content;

  margin:
    26px 0 48px;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    42px;

  font-size:
    .86rem;

  font-weight:
    850;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;

}


.flyer-hero-service {

  position:
    relative;

  color:
    rgba(255,255,255,.48);

  transition:
    color .4s ease,
    transform .4s ease,
    text-shadow .4s ease;

}


.flyer-hero-service::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -9px;

  width:
    0;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--flyer-red);

  transition:
    width .4s ease;

}


.flyer-hero-service.active {

  color:
    var(--flyer-red);

  transform:
    translateY(-2px);

  text-shadow:
    0 0 20px
    rgba(255,48,70,.22);

}


.flyer-hero-service.active::after {

  width:
    100%;

}


/* ==========================================================
   HERO TEXT
========================================================== */

.flyer-hero-content {

  width:
    min(
      720px,
      100%
    );

}


.flyer-hero-content h1 {

  margin:
    0 0 34px;

  color:
    #ffffff;

  font-size:
    clamp(
      3.05rem,
      5vw,
      5.7rem
    );

  line-height:
    .95;

  letter-spacing:
    -.07em;

  text-wrap:
    balance;

}


.flyer-color-word {

  display:
    block;

  min-height:
    1.05em;

  color:
    var(--flyer-red);

  text-shadow:
    0 0 24px
    rgba(255,48,70,.24);

  transition:
    opacity .28s ease,
    transform .28s ease;

}


.flyer-color-word.is-changing {

  opacity:
    0;

  transform:
    translateY(10px);

}


.flyer-hero-text {

  max-width:
    650px;

  margin:
    0;

  color:
    rgba(255,255,255,.79);

  font-size:
    clamp(
      .96rem,
      1.05vw,
      1.08rem
    );

  line-height:
    1.78;

}


/* ==========================================================
   HERO FACTS
========================================================== */

.flyer-hero-facts {

  width:
    min(
      920px,
      100%
    );

  margin-top:
    auto;

  padding-top:
    28px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  border-top:
    1px solid
    rgba(255,255,255,.16);

}


.flyer-hero-fact {

  position:
    relative;

  min-height:
    94px;

  padding:
    15px 25px;

  display:
    grid;

  grid-template-columns:
    auto minmax(0,1fr);

  align-items:
    start;

  gap:
    14px;

  transition:
    transform .35s ease,
    background .35s ease;

}


.flyer-hero-fact:first-child {

  padding-left:
    0;

}


.flyer-hero-fact:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  top:
    15px;

  right:
    0;

  bottom:
    15px;

  width:
    1px;

  background:
    rgba(255,255,255,.14);

}


.flyer-hero-fact-icon {

  min-width:
    34px;

  color:
    var(--flyer-red);

}


.flyer-hero-fact-icon svg {

  width:
    28px;

  height:
    28px;

  display:
    block;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.flyer-hero-fact strong {

  display:
    block;

  margin-bottom:
    5px;

  color:
    #ffffff;

  font-size:
    .9rem;

}


.flyer-hero-fact p {

  margin:
    0;

  color:
    rgba(255,255,255,.63);

  font-size:
    .73rem;

  line-height:
    1.45;

}


.flyer-hero-fact:hover {

  transform:
    translateY(-3px);

  background:

    linear-gradient(
      180deg,
      rgba(197,0,26,.08),
      transparent
    );

}


/* ==========================================================

   05
   EINSATZGEBIETE

========================================================== */

.flyer-use-section {

  background:
    var(--flyer-bg-deep);

}


/* ==========================================================
   GRID
========================================================== */

.flyer-use-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    22px;

}


/* ==========================================================
   KARTE
========================================================== */

.flyer-use-card {

  position:
    relative;

  min-height:
    320px;

  padding:
    32px 30px 30px;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  isolation:
    isolate;

  border:
    1px solid
    var(--flyer-line);

  border-radius:
    var(--flyer-radius);

  background:
    var(--flyer-card);

  box-shadow:
    var(--flyer-shadow-soft);

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    background .4s ease;

}


/* ==========================================================
   FLYERBILD

   Hochformat bleibt vollständig sichtbar.
   Nicht quadratisch beschneiden.
========================================================== */

.flyer-use-image {

  position:
    absolute;

  top:
    46%;

  left:
    50%;

  z-index:
    0;

  width:
    68%;

  height:
    76%;

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center;

  border-radius:
    10px;

  opacity:
    0;

  transform:
    translate(-50%, -50%)
    scale(.96);

  filter:
    brightness(.70)
    saturate(.9);

  pointer-events:
    none;

  transition:
    opacity .45s ease,
    transform .65s cubic-bezier(.2,.75,.2,1),
    filter .45s ease;

}


/* ==========================================================
   DUNKLER VERLAUF ÜBER DEM BILD

   Damit der Text unten lesbar bleibt.
========================================================== */

.flyer-use-card::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  opacity:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(7,8,9,.04) 0%,
      rgba(7,8,9,.08) 30%,
      rgba(7,8,9,.45) 58%,
      rgba(7,8,9,.88) 78%,
      rgba(7,8,9,.98) 100%
    );

  transition:
    opacity .4s ease;

}


/* ==========================================================
   ROTER LICHTAKZENT
========================================================== */

.flyer-use-card::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  opacity:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      135deg,
      rgba(197,0,26,.15),
      transparent 46%
    );

  transition:
    opacity .4s ease;

}


/* ==========================================================
   TEXT
========================================================== */

.flyer-use-card > span,
.flyer-use-card h3,
.flyer-use-card p {

  position:
    relative;

  z-index:
    3;

}


/* Nummer */

.flyer-use-card > span {

  position:
    absolute;

  top:
    30px;

  left:
    30px;

  color:
    transparent;

  font-size:
    2rem;

  font-weight:
    900;

  line-height:
    1;

  -webkit-text-stroke:
    1px var(--flyer-red);

}


/* Überschrift */

.flyer-use-card h3 {

  margin:
    0 0 10px;

  color:
    #ffffff;

  font-size:
    1.5rem;

  line-height:
    1.1;

}


/* Beschreibung */

.flyer-use-card p {

  margin:
    0;

  color:
    var(--flyer-muted);

  font-size:
    .87rem;

  line-height:
    1.6;

}


/* ==========================================================
   HOVER KARTE
========================================================== */

.flyer-use-card:hover {

  transform:
    translateY(-8px);

  border-color:
    var(--flyer-line-strong);

  background:
    var(--flyer-card-hover);

  box-shadow:
    var(--flyer-shadow);

}


/* ==========================================================
   HOVER BILD
========================================================== */

.flyer-use-card:hover
.flyer-use-image {

  opacity:
    1;

  transform:
    translate(-50%, -50%)
    scale(1);

  filter:
    brightness(.78)
    saturate(1);

}


/* ==========================================================
   HOVER OVERLAYS
========================================================== */

.flyer-use-card:hover::before,
.flyer-use-card:hover::after {

  opacity:
    1;

}

/* ==========================================================
   06
   VARIANTEN
========================================================== */

.flyer-variant-section {

  background:
    var(--flyer-bg);

}


.flyer-variant-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    24px;

}


.flyer-variant-card {

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(--flyer-line);

  border-radius:
    var(--flyer-radius);

  background:
    var(--flyer-card);

  box-shadow:
    var(--flyer-shadow-soft);

  transition:
    transform .4s ease,
    border-color .4s ease,
    background .4s ease,
    box-shadow .4s ease;

}


.flyer-variant-card:hover,
.flyer-variant-card:focus-visible {

  transform:
    translateY(-8px);

  border-color:
    var(--flyer-line-strong);

  background:
    var(--flyer-card-hover);

  box-shadow:
    var(--flyer-shadow);

  outline:
    none;

}


.flyer-variant-visual {

  position:
    relative;

  min-height:
    390px;

  padding:
    30px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  background:

    radial-gradient(
      circle at center,
      rgba(197,0,26,.12),
      transparent 55%
    ),

    #0b0d0e;

}


.flyer-visual-hint {

  position:
    absolute;

  right:
    20px;

  bottom:
    18px;

  left:
    20px;

  color:
    rgba(255,255,255,.43);

  font-size:
    .67rem;

  text-align:
    center;

}


/* ==========================================================
   STANDARDFLYER
========================================================== */

.flyer-standard-scene {

  width:
    200px;

  aspect-ratio:
    .707 / 1;

  perspective:
    1200px;

}


.flyer-standard-flipper {

  position:
    relative;

  width:
    100%;

  height:
    100%;

  transform-style:
    preserve-3d;

  transition:
    transform .85s
    cubic-bezier(.2,.75,.2,1);

}


.flyer-variant-card-standard:hover
.flyer-standard-flipper,
.flyer-variant-card-standard:focus-visible
.flyer-standard-flipper,
.flyer-variant-card-standard.is-flipped
.flyer-standard-flipper {

  transform:
    rotateY(180deg);

}


.flyer-standard-face {

  position:
    absolute;

  inset:
    0;

  padding:
    22px;

  overflow:
    hidden;

  border-radius:
    10px;

  color:
    #181818;

  background:

    linear-gradient(
      145deg,
      #ffffff,
      #eae7df
    );

  box-shadow:
    0 28px 60px
    rgba(0,0,0,.38);

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

}


.flyer-standard-front {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

}


.flyer-standard-back {

  display:
    flex;

  flex-direction:
    column;

  transform:
    rotateY(180deg);

}


.flyer-demo-brand {

  color:
    #111111;

  font-size:
    1.05rem;

  font-weight:
    950;

}


.flyer-demo-red-line {

  width:
    34px;

  height:
    4px;

  margin:
    9px 0 30px;

  border-radius:
    999px;

  background:
    var(--flyer-red);

}


.flyer-standard-front strong {

  font-size:
    1.5rem;

  line-height:
    1;

}


.flyer-standard-front > span {

  margin-top:
    8px;

  color:
    #555;

  font-size:
    .66rem;

}


.flyer-demo-image {

  width:
    100%;

  height:
    105px;

  margin-top:
    auto;

  display:
    grid;

  place-items:
    center;

  color:
    rgba(255,255,255,.82);

  border-radius:
    5px;

  background:

    linear-gradient(
      135deg,
      #292d30,
      #121415
    );

  font-size:
    .65rem;

  font-weight:
    900;

  letter-spacing:
    .15em;

}


.flyer-standard-front small {

  margin-top:
    12px;

  color:
    var(--flyer-red);

  font-size:
    .57rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.flyer-standard-back > small {

  color:
    var(--flyer-red);

  font-size:
    .57rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.flyer-standard-back > strong {

  margin-top:
    24px;

  font-size:
    1.35rem;

  line-height:
    1.05;

}


.flyer-demo-text-lines {

  margin-top:
    22px;

  display:
    grid;

  gap:
    8px;

}


.flyer-demo-text-lines i {

  display:
    block;

  width:
    100%;

  height:
    5px;

  border-radius:
    999px;

  background:
    rgba(0,0,0,.12);

}


.flyer-demo-text-lines i:nth-child(2) {

  width:
    88%;

}


.flyer-demo-text-lines i:nth-child(3) {

  width:
    74%;

}


.flyer-demo-text-lines i:nth-child(4) {

  width:
    92%;

}


.flyer-demo-contact {

  margin-top:
    auto;

  display:
    grid;

  gap:
    5px;

  color:
    #444;

  font-size:
    .62rem;

}


/* ==========================================================
   FALZFLYER VARIANTE
========================================================== */

.flyer-brochure-scene {

  width:
    min(
      400px,
      100%
    );

  height:
    230px;

  perspective:
    1300px;

}


.flyer-brochure-flipper {

  position:
    relative;

  width:
    100%;

  height:
    100%;

  transform-style:
    preserve-3d;

  transition:
    transform .9s
    cubic-bezier(.2,.75,.2,1);

}


.flyer-variant-card-fold:hover
.flyer-brochure-flipper,
.flyer-variant-card-fold:focus-visible
.flyer-brochure-flipper,
.flyer-variant-card-fold.is-flipped
.flyer-brochure-flipper {

  transform:
    rotateY(180deg);

}


.flyer-brochure-face {

  position:
    absolute;

  inset:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  overflow:
    hidden;

  border-radius:
    12px;

  background:
    #f2efe8;

  box-shadow:
    0 28px 60px
    rgba(0,0,0,.38);

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

}


.flyer-brochure-outside {

  transform:
    rotateY(180deg);

}


.flyer-brochure-panel {

  min-width:
    0;

  padding:
    18px 15px;

  display:
    flex;

  flex-direction:
    column;

  color:
    #171717;

  border-right:
    1px solid
    rgba(0,0,0,.12);

}


.flyer-brochure-panel:last-child {

  border-right:
    none;

}


.flyer-brochure-panel small {

  color:
    var(--flyer-red);

  font-size:
    .5rem;

  font-weight:
    900;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.flyer-brochure-panel strong {

  margin-top:
    18px;

  font-size:
    .95rem;

  line-height:
    1.05;

}


.flyer-brochure-lines {

  margin-top:
    18px;

  display:
    grid;

  gap:
    6px;

}


.flyer-brochure-lines i {

  display:
    block;

  height:
    4px;

  border-radius:
    999px;

  background:
    rgba(0,0,0,.12);

}


.flyer-brochure-panel-main {

  background:
    #ffffff;

}


.flyer-brochure-photo-box {

  height:
    92px;

  margin-top:
    18px;

  display:
    grid;

  place-items:
    center;

  color:
    rgba(255,255,255,.76);

  border-radius:
    5px;

  background:
    #24272a;

  font-size:
    .6rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

}


.flyer-brochure-photo > span {

  margin-top:
    auto;

  color:
    #555;

  font-size:
    .56rem;

}


.flyer-brochure-contact span {

  margin-top:
    7px;

  color:
    #555;

  font-size:
    .56rem;

}


.flyer-brochure-logo {

  margin-top:
    28px;

  color:
    #111;

  font-size:
    1.35rem;

  font-weight:
    950;

}


.flyer-brochure-cover > span {

  margin-top:
    7px;

  color:
    #555;

  font-size:
    .56rem;

}


/* ==========================================================
   VARIANTEN TEXT
========================================================== */

.flyer-variant-copy {

  padding:
    30px;

}


.flyer-variant-copy h3 {

  margin:
    0 0 12px;

  color:
    #ffffff;

  font-size:
    1.55rem;

}


.flyer-variant-copy p {

  margin:
    0;

  color:
    var(--flyer-muted);

  font-size:
    .88rem;

  line-height:
    1.65;

}


.flyer-variant-copy ul {

  margin:
    22px 0 0;

  padding:
    0;

  list-style:
    none;

  display:
    grid;

  gap:
    10px;

}


.flyer-variant-copy li {

  position:
    relative;

  padding-left:
    18px;

  color:
    rgba(255,255,255,.75);

  font-size:
    .82rem;

}


.flyer-variant-copy li::before {

  content:
    "";

  position:
    absolute;

  top:
    .62em;

  left:
    0;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--flyer-red);

}


/* ==========================================================
   07
   FORMATE
========================================================== */

.flyer-format-section {

  background:
    var(--flyer-bg-deep);

}


.flyer-format-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    22px;

}


.flyer-format-card {

  min-height:
    410px;

  padding:
    32px 28px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  border:
    1px solid
    var(--flyer-line);

  border-radius:
    var(--flyer-radius);

  background:
    var(--flyer-card);

  box-shadow:
    var(--flyer-shadow-soft);

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    background .4s ease;

}


.flyer-format-card:hover {

  transform:
    translateY(-8px);

  border-color:
    var(--flyer-line-strong);

  background:
    var(--flyer-card-hover);

  box-shadow:
    var(--flyer-shadow);

}


.flyer-format-paper {

  position:
    relative;

  width:
    100%;

  height:
    190px;

  display:
    grid;

  place-items:
    center;

  perspective:
    800px;

}


.flyer-format-paper > div {

  position:
    absolute;

  background:

    linear-gradient(
      145deg,
      #ffffff,
      #e7e3da
    );

  border:
    1px solid
    rgba(0,0,0,.10);

  box-shadow:
    0 22px 40px
    rgba(0,0,0,.28);

  transform:
    rotate(-4deg);

  transition:
    transform .45s ease;

}


.flyer-format-card:hover
.flyer-format-paper > div {

  transform:
    rotate(0deg)
    translateY(-4px);

}


.flyer-format-paper span {

  position:
    relative;

  z-index:
    2;

  color:
    #111;

  font-size:
    .8rem;

  font-weight:
    900;

}


.flyer-format-paper-a6 > div {

  width:
    84px;

  height:
    118px;

}


.flyer-format-paper-a5 > div {

  width:
    105px;

  height:
    148px;

}


.flyer-format-paper-a4 > div {

  width:
    126px;

  height:
    178px;

}


.flyer-format-paper-dinlang > div {

  width:
    92px;

  height:
    178px;

}


.flyer-format-copy {

  width:
    100%;

  margin-top:
    24px;

  text-align:
    left;

}


.flyer-format-copy h3 {

  margin:
    0 0 6px;

  color:
    #ffffff;

  font-size:
    1.35rem;

}


.flyer-format-copy strong {

  display:
    block;

  margin-bottom:
    12px;

  color:
    rgba(255,255,255,.88);

  font-size:
    .82rem;

}


.flyer-format-copy p {

  margin:
    0;

  color:
    var(--flyer-muted);

  font-size:
    .82rem;

  line-height:
    1.58;

}


.flyer-format-note {

  margin:
    28px 0 0;

  color:
    rgba(255,255,255,.48);

  font-size:
    .78rem;

}


/* ==========================================================
   08
   FALZARTEN
========================================================== */

.flyer-fold-section {

  background:
    var(--flyer-bg);

}


.flyer-fold-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    22px;

  align-items:
    stretch;

}


.flyer-fold-card {

  position:
    relative;

  min-width:
    0;

  min-height:
    470px;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--flyer-line);

  border-radius:
    var(--flyer-radius);

  background:
    var(--flyer-card);

  box-shadow:
    var(--flyer-shadow-soft);

  cursor:
    pointer;

  transition:
    transform .4s ease,
    border-color .4s ease,
    background .4s ease,
    box-shadow .4s ease;

}


.flyer-fold-card::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    0;

  pointer-events:
    none;

  background:

    radial-gradient(
      circle at 50% 23%,
      rgba(197,0,26,.13),
      transparent 48%
    );

  transition:
    opacity .4s ease;

}


.flyer-fold-card:hover,
.flyer-fold-card.is-fold-active {

  transform:
    translateY(-8px);

  border-color:
    var(--flyer-line-strong);

  background:
    var(--flyer-card-hover);

  box-shadow:
    var(--flyer-shadow);

}


.flyer-fold-card:hover::before,
.flyer-fold-card.is-fold-active::before {

  opacity:
    1;

}


.flyer-fold-demo {

  position:
    relative;

  z-index:
    1;

  min-height:
    275px;

  padding:
    38px 24px 24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    22px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  background:

    radial-gradient(
      circle at center,
      rgba(255,255,255,.04),
      transparent 65%
    );

}


.flyer-fold-stage {

  position:
    relative;

  width:
    100%;

  min-height:
    170px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  perspective:
    1200px;

  overflow:
    visible;

}


.flyer-fold-paper-base {

  display:
    none;

}


.wickel-panel,
.zickzack-panel,
.altar-door,
.altar-center {

  position:
    relative;

  z-index:
    2;

  height:
    160px;

  margin-left:
    -1px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    rgba(17,17,17,.72);

  background:

    linear-gradient(
      155deg,
      #ffffff 0%,
      #f6f3ed 55%,
      #ded9ce 100%
    );

  border:
    1px solid
    rgba(0,0,0,.11);

  box-shadow:
    0 18px 35px
    rgba(0,0,0,.24);

  transform-style:
    preserve-3d;

  backface-visibility:
    visible;

  transition:
    transform .72s
    cubic-bezier(.2,.75,.2,1),
    left .72s
    cubic-bezier(.2,.75,.2,1),
    filter .72s ease;

}


.wickel-panel::before,
.zickzack-panel::before,
.altar-door::before,
.altar-center::before {

  content:
    "";

  position:
    absolute;

  top:
    15px;

  right:
    13px;

  left:
    13px;

  height:
    3px;

  border-radius:
    999px;

  background:
    var(--flyer-red);

}


.wickel-panel span,
.zickzack-panel span,
.altar-door span,
.altar-center strong {

  font-size:
    .88rem;

  font-weight:
    900;

}


.wickel-panel small,
.zickzack-panel small,
.altar-door small,
.altar-center small {

  color:
    rgba(0,0,0,.43);

  font-size:
    .55rem;

  font-weight:
    800;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;

}


/* Wickelfalz */

.wickel-panel {

  width:
    100px;

}


.wickel-left {

  z-index:
    3;

  transform-origin:
    right center;

}


.wickel-center {

  z-index:
    2;

}


.wickel-right {

  z-index:
    4;

  transform-origin:
    left center;

}


.flyer-fold-card:hover
.wickel-right,
.flyer-fold-card.is-fold-active
.wickel-right {

  transform:
    rotateY(-168deg)
    translateZ(3px);

  filter:
    brightness(.92);

}


.flyer-fold-card:hover
.wickel-left,
.flyer-fold-card.is-fold-active
.wickel-left {

  transform:
    rotateY(168deg)
    translateZ(6px);

  transition-delay:
    .22s;

}


/* ==========================================================
   ZICKZACKFALZ

   EINE zusammenhängende Papierbahn.
   Alle vier Flächen sind exakt gleich hoch.
   Keine versetzten Höhen.
   Keine getrennten Einzel-Flyer.

   Ruhezustand:
   kompakt und klar als zusammenhängende Falzbahn.

   Hover / Klick:
   öffnet sich etwas, bleibt aber verbunden.
========================================================== */


/* ==========================================================
   STAGE
========================================================== */

.zickzack-stage {

  min-height:
    180px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    visible;

}


/* ==========================================================
   KOMPLETTE PAPIERBAHN
========================================================== */

.zickzack-strip {

  position:
    relative;

  display:
    flex;

  align-items:
    stretch;

  justify-content:
    center;

  transform:
    scaleX(.88);

  transform-origin:
    center;

  filter:
    drop-shadow(
      0 18px 24px
      rgba(0,0,0,.22)
    );

  transition:
    transform .65s
    cubic-bezier(.2,.75,.2,1);

}


/* ==========================================================
   EINZELNE SEGMENTE
========================================================== */

.zickzack-panel {

  position:
    relative;

  flex:
    0 0 82px;

  width:
    82px;

  height:
    158px;

  margin:
    0;

  margin-left:
    -1px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    rgba(17,17,17,.72);

  border:
    1px solid
    rgba(0,0,0,.12);

  background:
    linear-gradient(
      155deg,
      #ffffff 0%,
      #f7f4ee 58%,
      #e2ddd3 100%
    );

  box-shadow:
    none;

  overflow:
    hidden;

  transition:
    flex-basis .65s
    cubic-bezier(.2,.75,.2,1),

    width .65s
    cubic-bezier(.2,.75,.2,1),

    filter .65s ease,

    background .65s ease;

}


/* erste Fläche ohne negativen Abstand */

.zickzack-panel:first-child {

  margin-left:
    0;

}


/* ==========================================================
   WECHSELNDE HELLIGKEIT

   Dadurch entsteht der Eindruck von
   Vorder-/Rückfalz ohne Höhenversatz.
========================================================== */

.zickzack-one {

  z-index:
    4;

  filter:
    brightness(1);

}


.zickzack-two {

  z-index:
    3;

  filter:
    brightness(.88);

}


.zickzack-three {

  z-index:
    2;

  filter:
    brightness(1);

}


.zickzack-four {

  z-index:
    1;

  filter:
    brightness(.88);

}


/* ==========================================================
   FALZKANTEN
========================================================== */

.zickzack-panel:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    -1px;

  bottom:
    0;

  width:
    2px;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.12),
      rgba(0,0,0,.28),
      rgba(0,0,0,.12)
    );

  box-shadow:
    1px 0 0
    rgba(255,255,255,.38);

  pointer-events:
    none;

}


/* ==========================================================
   ROTE LINIE AUF DEN SEGMENTEN
========================================================== */

.zickzack-panel::before {

  content:
    "";

  position:
    absolute;

  top:
    14px;

  right:
    12px;

  left:
    12px;

  height:
    3px;

  border-radius:
    999px;

  background:
    var(--flyer-red);

}


/* ==========================================================
   TEXT
========================================================== */

.zickzack-panel span {

  position:
    relative;

  z-index:
    2;

  font-size:
    .88rem;

  font-weight:
    900;

}


.zickzack-panel small {

  position:
    relative;

  z-index:
    2;

  color:
    rgba(0,0,0,.43);

  font-size:
    .54rem;

  font-weight:
    800;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;

}


/* ==========================================================
   LEICHTE LICHTKANTE

   Verstärkt die Papierwirkung,
   ohne die Flächen voneinander zu trennen.
========================================================== */

.zickzack-one,
.zickzack-three {

  background:
    linear-gradient(
      155deg,
      #ffffff 0%,
      #f7f4ee 60%,
      #e4dfd5 100%
    );

}


.zickzack-two,
.zickzack-four {

  background:
    linear-gradient(
      155deg,
      #efede7 0%,
      #dedad1 60%,
      #cbc6bc 100%
    );

}


/* ==========================================================
   HOVER / KLICK

   Die gesamte Bahn wird breiter.
   Die Flächen bleiben verbunden.
========================================================== */

.flyer-fold-card:hover
.zickzack-strip,
.flyer-fold-card.is-fold-active
.zickzack-strip {

  transform:
    scaleX(1);

}


/* Flächen etwas öffnen */

.flyer-fold-card:hover
.zickzack-panel,
.flyer-fold-card.is-fold-active
.zickzack-panel {

  width:
    88px;

  flex-basis:
    88px;

}


/* dunklere Segmente beim Öffnen etwas heller */

.flyer-fold-card:hover
.zickzack-two,
.flyer-fold-card:hover
.zickzack-four,
.flyer-fold-card.is-fold-active
.zickzack-two,
.flyer-fold-card.is-fold-active
.zickzack-four {

  filter:
    brightness(.94);

}


/* ==========================================================
   MOBILE
========================================================== */

@media
(max-width: 680px) {

  .zickzack-strip {

    transform:
      scaleX(.78);

  }


  .zickzack-panel {

    width:
      68px;

    flex-basis:
      68px;

    height:
      138px;

  }


  .flyer-fold-card:hover
  .zickzack-strip,
  .flyer-fold-card.is-fold-active
  .zickzack-strip {

    transform:
      scaleX(.88);

  }


  .flyer-fold-card:hover
  .zickzack-panel,
  .flyer-fold-card.is-fold-active
  .zickzack-panel {

    width:
      72px;

    flex-basis:
      72px;

  }

}

/* Altarfalz */

.altar-door {

  width:
    78px;

}


.altar-center {

  width:
    156px;

  z-index:
    2;

}


.altar-left {

  z-index:
    4;

  transform-origin:
    right center;

}


.altar-right {

  z-index:
    4;

  transform-origin:
    left center;

}


.flyer-fold-card:hover
.altar-left,
.flyer-fold-card.is-fold-active
.altar-left {

  transform:
    rotateY(-162deg)
    translateZ(4px);

}


.flyer-fold-card:hover
.altar-right,
.flyer-fold-card.is-fold-active
.altar-right {

  transform:
    rotateY(162deg)
    translateZ(5px);

}


.flyer-fold-direction {

  width:
    fit-content;

  max-width:
    calc(100% - 20px);

  margin:
    0 auto;

  padding:
    7px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    rgba(255,255,255,.44);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.035);

  font-size:
    .58rem;

  text-align:
    center;

}


.flyer-fold-direction b {

  color:
    var(--flyer-red);

  font-size:
    .84rem;

}


.flyer-fold-direction-wide {

  font-size:
    .55rem;

}


.flyer-fold-copy {

  position:
    relative;

  z-index:
    2;

  flex:
    1;

  padding:
    28px 28px 30px;

}


.flyer-fold-copy .flyer-small-label {

  margin-bottom:
    14px;

  color:
    transparent;

  font-size:
    1.7rem;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0;

  -webkit-text-stroke:
    1px var(--flyer-red);

}


.flyer-fold-copy h3 {

  margin:
    0 0 10px;

  color:
    #ffffff;

  font-size:
    1.5rem;

}


.flyer-fold-copy p {

  margin:
    0;

  color:
    var(--flyer-muted);

  font-size:
    .84rem;

  line-height:
    1.62;

}


/* ==========================================================
   09
   PAPIER & GRAMMATUR
========================================================== */

.flyer-paper-section {

  background:
    var(--flyer-bg-deep);

}


.flyer-paper-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    22px;

  align-items:
    stretch;

}


/* ==========================================================
   KARTE
========================================================== */

.flyer-paper-card {

  position:
    relative;

  min-height:
    360px;

  padding:
    32px 30px 150px;

  overflow:
    hidden;

  border:
    1px solid
    var(--flyer-line);

  border-radius:
    var(--flyer-radius);

  background:
    var(--flyer-card);

  box-shadow:
    var(--flyer-shadow-soft);

  transition:
    transform .4s ease,
    border-color .4s ease,
    background .4s ease,
    box-shadow .4s ease;

}


.flyer-paper-card:hover {

  transform:
    translateY(-8px);

  border-color:
    var(--flyer-line-strong);

  background:
    var(--flyer-card-hover);

  box-shadow:
    var(--flyer-shadow);

}


.flyer-paper-weight {

  position:
    relative;

  z-index:
    5;

  display:
    block;

  margin-bottom:
    18px;

  color:
    var(--flyer-red);

  font-size:
    .74rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.flyer-paper-card h3 {

  position:
    relative;

  z-index:
    5;

  margin:
    0 0 10px;

  color:
    #ffffff;

  font-size:
    1.5rem;

}


.flyer-paper-card p {

  position:
    relative;

  z-index:
    5;

  max-width:
    250px;

  margin:
    0;

  color:
    var(--flyer-muted);

  font-size:
    .86rem;

  line-height:
    1.6;

}


/* ==========================================================
   PAPIERSTAPEL
========================================================== */

.paper-stack {

  --sheet-gap:
    3px;

  --stack-height:
    60px;

  position:
    absolute;

  right:
    28px;

  bottom:
    30px;

  left:
    28px;

  height:
    var(--stack-height);

  perspective:
    900px;

  transform:
    rotateX(54deg)
    rotateZ(-2deg);

  transform-origin:
    center bottom;

  transition:
    transform .45s ease;

}


.flyer-paper-card:hover
.paper-stack {

  transform:
    rotateX(48deg)
    rotateZ(0deg)
    translateY(-5px);

}


/* ==========================================================
   EINZELNE PAPIERLAGEN
========================================================== */

.paper-stack i {

  position:
    absolute;

  right:
    0;

  left:
    0;

  height:
    34px;

  border:
    1px solid
    rgba(0,0,0,.13);

  border-radius:
    3px;

  background:

    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8f6f0 58%,
      #ded9ce 100%
    );

  box-shadow:
    0 8px 18px
    rgba(0,0,0,.15);

}


/* jede Lage sitzt etwas höher */

.paper-stack i:nth-child(1) {
  bottom: 0;
}

.paper-stack i:nth-child(2) {
  bottom: calc(var(--sheet-gap) * 1);
}

.paper-stack i:nth-child(3) {
  bottom: calc(var(--sheet-gap) * 2);
}

.paper-stack i:nth-child(4) {
  bottom: calc(var(--sheet-gap) * 3);
}

.paper-stack i:nth-child(5) {
  bottom: calc(var(--sheet-gap) * 4);
}

.paper-stack i:nth-child(6) {
  bottom: calc(var(--sheet-gap) * 5);
}

.paper-stack i:nth-child(7) {
  bottom: calc(var(--sheet-gap) * 6);
}


/* ==========================================================
   UNTERSCHIEDLICHE GRAMMATUR

   Je stärker das Papier,
   desto größer der sichtbare Abstand der Lagen.
========================================================== */


/* 90–120 g */

.paper-stack-light {

  --sheet-gap:
    2px;

  --stack-height:
    48px;

}


/* 135–170 g */

.paper-stack-medium {

  --sheet-gap:
    4px;

  --stack-height:
    58px;

}


/* 200–250 g */

.paper-stack-strong {

  --sheet-gap:
    6px;

  --stack-height:
    70px;

}


/* 300–350 g */

.paper-stack-extra {

  --sheet-gap:
    8px;

  --stack-height:
    82px;

}


/* ==========================================================
   LICHTKANTE OBEN
========================================================== */

.paper-stack i:last-child::after {

  content:
    "";

  position:
    absolute;

  top:
    5px;

  right:
    8px;

  left:
    8px;

  height:
    1px;

  background:
    rgba(255,255,255,.8);

}


/* ==========================================================
   HOVER
========================================================== */

.flyer-paper-card:hover
.paper-stack i {

  box-shadow:
    0 12px 22px
    rgba(0,0,0,.20);

}
/* ==========================================================
   10
   PRODUKTION
========================================================== */

.flyer-production-section {

  background:
    var(--flyer-bg);

}


.flyer-production-timeline {

  --production-progress:
    0%;

  position:
    relative;

  display:
    grid;

  gap:
    26px;

  padding:
    12px 0;

}


.flyer-production-timeline::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    50%;

  width:
    2px;

  transform:
    translateX(-50%);

  background:
    rgba(255,255,255,.09);

}


.flyer-production-timeline::after {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    50%;

  width:
    2px;

  height:
    var(--production-progress);

  transform:
    translateX(-50%);

  background:
    var(--flyer-red);

  box-shadow:
    0 0 20px
    rgba(255,48,70,.28);

  transition:
    height .5s ease;

}


.flyer-production-step {

  position:
    relative;

  z-index:
    2;

  width:
    calc(50% - 42px);

  min-height:
    170px;

  padding:
    28px 30px;

  display:
    grid;

  grid-template-columns:
    auto minmax(0,1fr);

  gap:
    22px;

  align-items:
    start;

  border:
    1px solid
    var(--flyer-line);

  border-radius:
    var(--flyer-radius);

  background:
    var(--flyer-card);

  box-shadow:
    var(--flyer-shadow-soft);

  transition:
    transform .4s ease,
    border-color .4s ease,
    background .4s ease,
    box-shadow .4s ease;

}


.flyer-production-left {

  justify-self:
    start;

}


.flyer-production-right {

  justify-self:
    end;

}


.flyer-production-number {

  color:
    transparent;

  font-size:
    2rem;

  font-weight:
    900;

  line-height:
    1;

  -webkit-text-stroke:
    1px var(--flyer-red);

  transition:
    color .4s ease,
    -webkit-text-stroke-color .4s ease,
    text-shadow .4s ease;

}


.flyer-production-step small {

  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--flyer-red);

  font-size:
    .64rem;

  font-weight:
    900;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.flyer-production-step h3 {

  margin:
    0 0 8px;

  color:
    #ffffff;

  font-size:
    1.35rem;

}


.flyer-production-step p {

  margin:
    0;

  color:
    var(--flyer-muted);

  font-size:
    .84rem;

  line-height:
    1.6;

}


.flyer-production-step:hover,
.flyer-production-step.is-active {

  transform:
    translateY(-6px);

  border-color:
    var(--flyer-line-strong);

  background:
    var(--flyer-card-hover);

  box-shadow:
    var(--flyer-shadow);

}


.flyer-production-step.is-active
.flyer-production-number {

  color:
    var(--flyer-red);

  -webkit-text-stroke-color:
    transparent;

  text-shadow:
    0 0 20px
    rgba(255,48,70,.28);

}


/* ==========================================================
   11
   FAQ
========================================================== */

.flyer-faq-section {

  background:
    var(--flyer-bg-deep);

}


.flyer-faq-list {

  border-top:
    1px solid
    var(--flyer-line);

}


.flyer-faq-item {

  border-bottom:
    1px solid
    var(--flyer-line);

}


.flyer-faq-item summary {

  min-height:
    92px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  color:
    #ffffff;

  cursor:
    pointer;

  list-style:
    none;

  font-size:
    1.05rem;

  font-weight:
    750;

}


.flyer-faq-item summary::-webkit-details-marker {

  display:
    none;

}


.flyer-faq-item summary b {

  width:
    34px;

  height:
    34px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--flyer-line);

  border-radius:
    50%;

  color:
    var(--flyer-red);

  font-size:
    1.15rem;

  font-weight:
    500;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;

}


.flyer-faq-item[open]
summary b {

  transform:
    rotate(45deg);

  border-color:
    var(--flyer-red);

  background:
    rgba(197,0,26,.1);

}


.flyer-faq-item > p {

  max-width:
    760px;

  margin:
    -4px 0 28px;

  color:
    var(--flyer-muted);

  font-size:
    .9rem;

  line-height:
    1.7;

}


/* ==========================================================
   12
   FINAL CTA
   GLEICH WIE DIE ANDEREN PRODUKTSEITEN
========================================================== */

.flyer-final-section {

  padding-top:
    72px;

  padding-bottom:
    105px;

  background:
    var(--flyer-bg);

}


/* ==========================================================
   KARTE
========================================================== */

.flyer-final-card {

  position:
    relative;

  padding:
    clamp(
      42px,
      5vw,
      68px
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    28px;

  background:

    radial-gradient(
      circle at 5% 20%,
      rgba(197,0,26,.13),
      transparent 38%
    ),

    rgba(255,255,255,.025);

  box-shadow:
    0 30px 70px
    rgba(0,0,0,.22);

}


/* Keine zusätzlichen Kreise / Deko */

.flyer-final-card::before,
.flyer-final-card::after {

  display:
    none !important;

  content:
    none !important;

}


/* ==========================================================
   TEXT
========================================================== */

.flyer-final-copy {

  max-width:
    850px;

}


.flyer-final-copy .flyer-kicker {

  margin-bottom:
    14px;

}


.flyer-final-copy h2 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.35rem
    );

  line-height:
    1;

  letter-spacing:
    -.045em;

}


.flyer-final-copy > p:not(.flyer-kicker) {

  max-width:
    720px;

  margin:
    22px 0 0;

  color:
    var(--flyer-muted);

  line-height:
    1.7;

}


/* ==========================================================
   BUTTON
========================================================== */

.flyer-final-button {

  min-height:
    56px;

  margin-top:
    30px;

  padding:
    16px 29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    #f10d1b;

  border:
    1px solid
    #f10d1b;

  border-radius:
    999px;

  box-shadow:
    0 15px 35px
    rgba(241,13,27,.24);

  font-size:
    .94rem;

  font-weight:
    850;

  text-decoration:
    none;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.flyer-final-button:hover,
.flyer-final-button:focus-visible {

  color:
    #ffffff;

  background:
    #c5001a;

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px
    rgba(241,13,27,.32);

  outline:
    none;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media
(max-width: 680px) {

  .flyer-final-section {

    padding-top:
      58px;

    padding-bottom:
      74px;

  }


  .flyer-final-card {

    padding:
      34px 24px;

  }


  .flyer-final-button {

    width:
      100%;

  }

}


/* ==========================================================
   13
   REVEAL
========================================================== */

.reveal {

  opacity:
    0;

  transform:
    translateY(28px);

  transition:
    opacity .7s ease
    var(--reveal-delay, 0ms),

    transform .7s ease
    var(--reveal-delay, 0ms);

}


.reveal.is-visible {

  opacity:
    1;

  transform:
    translateY(0);

}


/* ==========================================================
   14
   RESPONSIVE
========================================================== */

@media
(max-width: 1200px) {

  .flyer-use-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr));

  }


  .flyer-format-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr));

  }


  .flyer-paper-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr));

  }


  .flyer-fold-grid {

    grid-template-columns:
      1fr;

  }


  .flyer-fold-card {

    min-height:
      0;

  }

}



@media
(max-width: 900px) {

  .flyer-section {

    padding:
      80px 0;

  }


  .flyer-hero {

    min-height:
      auto;

  }


  .flyer-hero-inner {

    min-height:
      680px;

    padding-top:
      70px;

  }


  .flyer-hero-bg {

    opacity:
      .55;

  }


  .flyer-hero-overlay {

    background:

      linear-gradient(
        180deg,
        rgba(5,5,5,.70),
        rgba(5,5,5,.88)
      );

  }


  .flyer-hero-services {

    gap:
      24px;

  }


  .flyer-hero-facts {

    grid-template-columns:
      1fr;

  }


  .flyer-hero-fact {

    padding:
      18px 0;

  }


  .flyer-hero-fact:not(:last-child)::after {

    top:
      auto;

    right:
      0;

    bottom:
      0;

    left:
      0;

    width:
      auto;

    height:
      1px;

  }


  .flyer-variant-grid {

    grid-template-columns:
      1fr;

  }


  .flyer-production-timeline::before,
  .flyer-production-timeline::after {

    left:
      14px;

  }


  .flyer-production-step {

    width:
      calc(100% - 45px);

    justify-self:
      end;

  }


  .flyer-production-left,
  .flyer-production-right {

    justify-self:
      end;

  }


  .flyer-final-card {

    padding:
      50px 40px;

  }

}



@media
(max-width: 680px) {

  .flyer-shell {

    padding-right:
      22px;

    padding-left:
      22px;

  }


  .flyer-section {

    padding:
      64px 0;

  }


  .flyer-section-intro,
  .flyer-faq-heading {

    margin-bottom:
      38px;

  }


  .flyer-hero-inner {

    min-height:
      650px;

    padding-top:
      50px;

  }


  .flyer-hero-services {

    gap:
      20px;

    font-size:
      .69rem;

  }


  .flyer-hero-content h1 {

    font-size:
      clamp(
        2.8rem,
        13vw,
        4.4rem
      );

  }


  .flyer-use-grid,
  .flyer-format-grid,
  .flyer-paper-grid {

    grid-template-columns:
      1fr;

  }


  .flyer-use-card {

    min-height:
      280px;

  }


  .flyer-variant-visual {

    min-height:
      340px;

    padding:
      24px 16px;

  }


  .flyer-brochure-scene {

    transform:
      scale(.82);

  }


  .flyer-fold-demo {

    min-height:
      245px;

    padding:
      30px 16px 20px;

  }


  .wickel-panel {

    width:
      78px;

    height:
      138px;

  }


  .zickzack-panel {

    width:
      65px;

    height:
      138px;

  }


  .altar-door {

    width:
      58px;

    height:
      138px;

  }


  .altar-center {

    width:
      116px;

    height:
      138px;

  }


  .zickzack-one {

    left:
      calc(50% - 80px);

  }


  .zickzack-two {

    left:
      calc(50% - 43px);

  }


  .zickzack-three {

    left:
      calc(50% - 6px);

  }


  .zickzack-four {

    left:
      calc(50% + 31px);

  }


  .flyer-fold-card:hover
  .zickzack-one,
  .flyer-fold-card.is-fold-active
  .zickzack-one {

    left:
      calc(50% - 123px);

  }


  .flyer-fold-card:hover
  .zickzack-two,
  .flyer-fold-card.is-fold-active
  .zickzack-two {

    left:
      calc(50% - 62px);

  }


  .flyer-fold-card:hover
  .zickzack-three,
  .flyer-fold-card.is-fold-active
  .zickzack-three {

    left:
      calc(50% - 1px);

  }


  .flyer-fold-card:hover
  .zickzack-four,
  .flyer-fold-card.is-fold-active
  .zickzack-four {

    left:
      calc(50% + 60px);

  }


  .flyer-fold-direction {

    flex-wrap:
      wrap;

  }


  .flyer-production-step {

    grid-template-columns:
      1fr;

    gap:
      12px;

    padding:
      24px;

  }


  .flyer-final-card {

    min-height:
      380px;

    padding:
      40px 26px;

  }


  .flyer-final-card::after {

    width:
      250px;

    height:
      250px;

  }

}



/* ==========================================================
   15
   REDUCED MOTION
========================================================== */

@media
(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }


  .reveal {

    opacity:
      1;

    transform:
      none;

  }

}